{#
  Макроопределение «Таблица issues»
#}

{#----------------------------------------------------------------------------#}
{# Подключаемые стили #}
{% macro STYLES() -%}
  <link href="/static/css/datatables.min.css" rel="stylesheet" type="text/css" />
  <link href="/static/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css" />
  <link href="/static/css/scroller.dataTables.min.css" rel="stylesheet" type="text/css" />
  <link href="/static/css/tables.css" rel="stylesheet" type="text/css" />

  {# TODO: Перенести стиль в соответствующее место. #}
  <style>
    /* INFO : Стиль dataTables_filter скрывает единое поле ввода для поиска
              запроса, серверная сторона сейчас не поддерживает такой поиск. */
    .dataTables_filter {
      display: none;
    }
    .sortMask {
      width: 19px;
      height: 19px;
      float: right;
      display: inline-block;
      z-index: 0;
      margin-right: -19px;
    }
    .margin-right-10 {
      margin-right: 10px
    }
    .table-cell-value .hidden-child {
      visibility: hidden;
    }
    .link-icon-size {
      font-size: 1.3em;
    }
    /* TODO : растягивать ссылку на всю ячейку, при этом не «отъедая» лишнего
              пространства у соседних столбцов */
    .link {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      min-width: 100px;
      max-width: 400px;
    }
    .size-icon {
      font-size: 1.1em;
    }
    .table-cell-value:hover .hidden-child {
      visibility: visible;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .table-column-filter-input {
      min-width: 80px;
    }
  </style>
{%- endmacro %}

{#----------------------------------------------------------------------------#}
{# Тег таблицы.

  Аргументы
  ----------
  columns : List<string>
    Перечень имён столбцов, из которых будет построена таблица.

  column_helper : IssuesColumnHelper
    Экземпляр хелпера для получения информации о столбщах (название, поведение).

  issues_table : string
    Идентификатор таблицы, используется в макроопределении DOCUMENT_READY_SCRIPT
    для инициализации.
#}
{% macro TAG(
      columns,
      column_helper,
      issues_table="issues_table")
-%}
  <table
      class="table table-striped table-sm table-bordered table-hover compact"
      style="width:100%"
      id="{{ issues_table }}">
    <thead>
      <tr>
        {% for column in columns %}
          <th>
            {% set caption = column_helper.caption(column) %}
            {% if caption %}
              <input
                  type="search"
                  class="form-control table-column-filter-input"
                  placeholder="{{ caption }}"
                  title="{{ caption }}"
                  id="filter_field_{{ column|replace('|', '_') }}"
                  {% if not column_helper.is_searchable_column(column) -%}
                    readonly disabled
                  {%- endif %}
                  />
            {% endif %}
          </th>
        {% endfor %}
      </tr>
    </thead>
    <tfoot>
      <tr>
        {% for column in columns %}
          <th>
            {{ column_helper.caption(column)|e }}
          </th>
        {% endfor %}
      </tr>
    </tfoot>
  </table>
{%- endmacro %}

{#----------------------------------------------------------------------------#}
{# Подключаемые скрипты #}
{% macro SCRIPTS() -%}
  <script src="/static/js/datatables.min.js"></script>
  <script src="/static/js/jquery.dataTables.min.js"></script>
  <script src="/static/js/dataTables.bootstrap5.min.js"></script>
  <script src="/static/js/dataTables.scroller.min.js"></script>
  <script>
    function filter_field(key, value) {
      $(function () {
        $('#filter_field_' + key).val(value).change();
      });
    }
  </script>
{%- endmacro %}

{#----------------------------------------------------------------------------#}
{# Скрипт инициализации таблицы.

  Аргументы
  ----------
  columns : List<string>
    Перечень имён столбцов, из которых будет построена таблица.

  column_helper : IssuesColumnHelper
    Экземпляр хелпера для получения информации о столбщах (название, поведение).

  var_name : string
    Имя переменной, куда будет записан экземпляр DataTable().

  issues_table : string
    Идентификатор таблицы, используется в макроопределении TAG.

  url : string
    Адрес, куда обращаться за json-данными для контента таблицы.
#}
{% macro DOCUMENT_READY_SCRIPT(
      columns,
      column_helper,
      var_name="issues_table",
      issues_table="issues_table",
      url="issues_data")
-%}
  $('th').on("click", function (event) {
    if ($(event.target).is("input")) {
      event.stopImmediatePropagation();
    }
  });
  var {{ var_name }} = $('#{{ issues_table }}').DataTable({
    "initComplete": function () {
      {# Отправка данных поиска на серверную сторону #}
      this.api().columns().every( function () {
        var that = this;

        $( 'input', this.header() ).on( 'keyup change clear search', function () {
          if ( that.search() !== this.value ) {
            that
              .search( this.value )
              .draw();
          }
        } );
      } );
    },
    "paging": true,
    "processing": true,
    "serverSide": true,
    "scrollX": true,
    "ajax": {
      "url": "{{ url }}",
      "type": "POST"
    },
    "orderCellsTop": true,
    "searching": true,
    "ordering": true,
    "pageLength": 12,
    "lengthChange": false,
    "scrollY": "640px", {# TODO: Добавить «адаптивность» по высоте страницы. #}
    "scroller": {
        "rowHeight": 54
    },
    "scrollCollapse": true,
    "deferRender": true,
    "columns": [
      {% for column in columns %}
        {
          name: '{{ column }}',
          data: '{{ column }}',
          render: {{ column_helper.js_render_function(column) }},
          orderable: {{ 'true' if column_helper.is_orderable_column(column) else 'false' }},
          className: 'dt-nowrap',
          searchable: {{ 'true' if column_helper.is_searchable_column(column) else 'false' }}
        }
        {{- ", " if not loop.last else "" -}}
      {% endfor %}
    ]
  });
{%- endmacro %}
